<template>
	<view >
		<image :src="src" mode="aspectFill" :style="{width:width?width:'',height:height?height:'',opacity:opacity}"  @longpress="imgLongpress" @tap="imgTap" :data-src='src' ref='img' @touchmove.stop.prevent="imgTouchmove" @touchend="imgTouchend" id="img"></image>
		<image :src="src" mode="aspectFill" :style="{width:imgWidth?imgWidth:'',height:imgHeight?imgHeight:'',transform:transform}" v-if="isImgLongpress" class="isLongpressImg" ></image>
		<view id="deleImg" v-if="isImgLongpress">
			<text>{{deleText}}</text> 
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type:String,
				default:""
			},
			width: {
				type:String,
				default:""
			},
			height: {
				type:String,
				default:""
			},
			idx: {
				type:Number,
				default:0
			},
			index: {
				type:Number,
				default:0
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isImgLongpress:false,
				transform:null,
				startX:null,
				startY:null,
				imgWidth:null,
				imgHeight:null,
				opacity:1,
				deleText:'拖到此处删除',
				dataTop:null
			};
		},
		methods: {
			imgLongpress(e) {
				if(this.disabled){
					return
				}
				this.$emit("startMove")
				this.imgWidth=this.$refs.img.$el.offsetWidth+'px'
				this.imgHeight=this.$refs.img.$el.offsetHeight+'px'
				this.startX=e.touches[0].clientX
				this.startY=e.touches[0].clientY
				this.transform='translate('+(this.startX-this.$refs.img.$el.offsetWidth/2)+'px,'+(this.startY-this.$refs.img.$el.offsetHeight/2)+'px)'
				this.opacity=0
				this.isImgLongpress=true
				this.$nextTick(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.select('#deleImg').boundingClientRect(data => {
						this.dataTop=data.top
					}).exec()
				})
			},
			imgTouchmove(e){
				try{
					this.transform='translate('+(e.touches[0].clientX-this.$refs.img.$el.offsetWidth/2)+'px,'+(e.touches[0].clientY-this.$refs.img.$el.offsetHeight/2)+'px)'
					this.startX=e.touches[0].clientX-this.$refs.img.$el.offsetWidth/2
					this.startY=e.touches[0].clientY-this.$refs.img.$el.offsetHeight/2
					if(this.startY+this.$refs.img.$el.offsetHeight>this.dataTop){
						this.deleText='松手即可删除'
					}else{
						this.deleText='拖到此处删除'
					}
				}catch(c){
					//TODO handle the exception
				}
			},
			imgTouchend(e){
				if(this.isImgLongpress){
					this.$emit('stopMove')
					if(this.deleText=='松手即可删除'){
						this.$emit('deleSuccess',this.index)
						this.imgWidth=null
						this.startX=null
						this.startY=null
						this.transform=null
						this.opacity=1
						this.isImgLongpress=false
						return
					}
					let query = uni.createSelectorQuery().in(this);
					query.select('#img').boundingClientRect(data => {
					  let x=this.startX
					  let y=this.startY
					  let chaX=data.left-x
					  let chaY=data.top-y
					  chaX=Math.round(chaX)
					  chaY=Math.round(chaY)
					  let n=15
					  let Interval=setInterval(()=>{
					  	n-=1
					  	this.transform='translate('+(data.left-chaX*(n/15))+'px,'+(data.top-chaY*(n/15))+'px)'
					  	if(n==0){
					  		clearInterval(Interval)	
					  		this.imgWidth=null
					  		this.startX=null
					  		this.startY=null
					  		this.transform=null
					  		this.opacity=1
					  		this.isImgLongpress=false
					  	}	
					  },15)
					}).exec()
				}
			},
			imgTap(e){
				this.$emit('imgTap',this.index, this.idx)
			}
		},
	}
</script>

<style>
	.isLongpressImg{
		position: fixed;
		z-index: 1000001;
		top:0;
		left: 0;
	}
	image{
		height: 100%;
		width: 100%;
		display: block;
	}
	#deleImg{
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #C84739;
		height: 98rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index:1000000;
	}
	#deleImg>text{
		color: #FFFFFF;
		font-size: 34rpx;
		display: inline-block;
	}
</style>
